<%@page contentType="text/html; charset=utf-8"%>
<title>Form Elements - Ace Admin</title>

<link rel="stylesheet" href="${ctx}/static/admin/ace/css/jquery-ui.css" />
<link rel="stylesheet" href="${ctx}/static/admin/ace/css/jquery-ui.custom.css" />
<link rel="stylesheet" href="${ctx}/static/admin/ace/css/chosen.css" />
<link rel="stylesheet" href="${ctx}/static/admin/ace/css/datepicker.css" />
<link rel="stylesheet" href="${ctx}/static/admin/ace/css/bootstrap-timepicker.css" />
<link rel="stylesheet" href="${ctx}/static/admin/ace/css/daterangepicker.css" />
<link rel="stylesheet" href="${ctx}/static/admin/ace/css/bootstrap-datetimepicker.css" />
<link rel="stylesheet" href="${ctx}/static/admin/ace/css/colorpicker.css" />


<div class="row">
	<div class="col-xs-12">
		<!-- PAGE CONTENT BEGINS -->
		
		<div class="btn-group">
			<button id="add-bto" class="btn btn-primary btn-sm">
				<i class="glyphicon glyphicon-plus"></i>添加
			</button>
			<button id="edit-bto" class="btn btn-info btn-sm">
				<i class="ace-icon fa fa-pencil-square-o"></i>编辑
			</button>
			<button id="del-bto" class="btn btn-danger btn-sm">
				<i class="ace-icon fa fa-trash"></i>删除
			</button>
			<button id="search-bto" class="btn btn-purple btn-sm">
				<i class="ace-icon fa fa-search"></i>搜索
			</button>
			<button id="reload-bto" class="btn btn-success btn-sm">
				<i class="ace-icon fa fa-refresh"></i>刷新
			</button>
			<a href="#" id="id-btn-dialog1" class="btn btn-purple btn-sm">Modal Dialog</a>
		</div>
		
		<div id="dialog-message" class="hide">
			<form class="form-horizontal" role="form">
				<!-- #section:elements.form -->
				<div class="form-group">
					<label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 用户名 </label>
	
					<div class="col-sm-9">
						<input type="text" id="form-field-1" placeholder="Username" class="col-xs-10 col-sm-5" />
					</div>
				</div>
	
				<div class="form-group">
					<label class="col-sm-3 control-label no-padding-right" for="form-field-1-1"> 密码 </label>
	
					<div class="col-sm-9">
						<input type="text" id="form-field-1-1" placeholder="Text Field" class="col-xs-10 col-sm-5" />
					</div>
				</div>
	
				<!-- /section:elements.form -->
				<div class="space-4"></div>
	
				<div class="form-group">
					<label class="col-sm-3 control-label no-padding-right" for="form-field-2"> Password Field </label>
	
					<div class="col-sm-9">
						<input type="password" id="form-field-2" placeholder="Password" class="col-xs-10 col-sm-5" />
						<span class="help-inline col-xs-12 col-sm-7">
							<span class="middle">Inline help text</span>
						</span>
					</div>
				</div>
	
			</form>
		</div><!-- #dialog -->
		
		


		<!-- PAGE CONTENT ENDS -->
	</div><!-- /.col -->
</div><!-- /.row -->


<!--
[if lte IE 8]>
  <script src="${ctx}/static/admin/ace/js/excanvas.js"></script>
<![endif]
-->
<script type="text/javascript">
	var scripts = [null,
	               "${ctx}/static/admin/ace/js/jquery-ui.js",
	               "${ctx}/static/admin/ace/js/jquery-ui.custom.js",
	               "${ctx}/static/admin/ace/js/jquery.ui.touch-punch.js",
	               "${ctx}/static/admin/ace/js/chosen.jquery.js",
	               "${ctx}/static/admin/ace/js/fuelux/fuelux.spinner.js",
	               "${ctx}/static/admin/ace/js/date-time/bootstrap-datepicker.js",
	               "${ctx}/static/admin/ace/js/date-time/bootstrap-timepicker.js",
	               "${ctx}/static/admin/ace/js/date-time/moment.js",
	               "${ctx}/static/admin/ace/js/date-time/daterangepicker.js",
	               "${ctx}/static/admin/ace/js/date-time/bootstrap-datetimepicker.js",
	               "${ctx}/static/admin/ace/js/bootstrap-colorpicker.js",
	               "${ctx}/static/admin/ace/js/jquery.knob.js",
	               "${ctx}/static/admin/ace/js/jquery.autosize.js",
	               "${ctx}/static/admin/ace/js/jquery.inputlimiter.1.3.1.js",
	               "${ctx}/static/admin/ace/js/jquery.maskedinput.js",
	               "${ctx}/static/admin/ace/js/bootstrap-tag.js",
	               null];
	$('.page-content-area').ace_ajax('loadScripts', scripts, function() {
	  
		 jQuery(function($) {
			 
			 $.widget("ui.dialog", $.extend({}, $.ui.dialog.prototype, {
				_title: function(title) {
					var $title = this.options.title || '&nbsp;';
					if( ("title_html" in this.options) && this.options.title_html == true )
						title.html($title);
					else title.text($title);
				}
			}));
			
			$( "#id-btn-dialog1" ).on('click', function(e) {
				e.preventDefault();
				var dialog = $( "#dialog-message" ).removeClass('hide').dialog({
					modal: true,
					title: "<div class='widget-header widget-header-small'><h4 class='smaller'><i class='ace-icon fa fa-check'></i>添加</h4></div>",
					title_html: true,
					width: 800,
					height: 600,
					buttons: [ 
						{
							text: "取消",
							"class" : "btn btn-xs",
							click: function() {
								$(this).dialog( "close" ); 
							} 
						},
						{
							text: "提交",
							"class" : "btn btn-primary btn-xs",
							click: function() {
								$(this).dialog( "close" ); 
							} 
						}
					]
				});
			});
		});
	});
</script>
